<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">

</script>
<script src="/js/lib/twitter-text.js"></script>
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/css/global.css">
<title>TwitCockpit α</title>
</head>
<body>
	<div class="topbar" data-dropdown="dropdown">
		<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container-fluid">
					<a class="brand" href="/">TwitCockpit α</a>
					<div class="nav-collapse">
						<ul class="nav">
							<li><a href="/cockpit/">Cockpit</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<div id="twitter-hometimeline" class="twitter-tweet-list">
					<h3>HomeTimeLine</h3>
					<c:forEach var="e" items="${homeTimeLine}">
						<div class="twitter-tweet">
							<div class="twitter-profile-image">
								<a href="http://twitter.com/${f:h(e.user.screenName)}"> <img
									height="48" width="48" src="${f:url(e.user.profileImageURL)}"
									alt="twitterProfileImage">
								</a>
							</div>
							<div class="twitter-bbspost-body">
								<div class="twitter-screen-name">
									<a href="http://twitter.com/${f:h(e.user.screenName)}"
										target="_blank"> ${f:h(e.user.screenName)} </a>
								</div>
								<div class="twitter-name">${f:h(e.user.name)}</div>
								<div class="twitter-content">${f:h(e.text)}</div>
								<div class="twitter-entrydate">${e.createdAt}</div>
							</div>
						</div>
					</c:forEach>
				</div>
				<div id="twitter-mentions" class="twitter-tweet-list">
					<h3>Mentions</h3>
					<c:forEach var="e" items="${mentions}">
						<div class="twitter-tweet">
							<div class="twitter-profile-image">
								<a href="http://twitter.com/${f:h(e.user.screenName)}"> <img
									height="48" width="48" src="${f:url(e.user.profileImageURL)}"
									alt="twitterProfileImage">
								</a>
							</div>
							<div class="twitter-bbspost-body">
								<div class="twitter-screen-name">
									<a href="http://twitter.com/${f:h(e.user.screenName)}"
										target="_blank"> ${f:h(e.user.screenName)} </a>
								</div>
								<div class="twitter-name">${f:h(e.user.name)}</div>
								<div class="twitter-content">${f:h(e.text)}</div>
								<div class="twitter-entrydate">${e.createdAt}</div>
							</div>
						</div>
					</c:forEach>
				</div>
				<div id="twitter-chugokugtug-hash" class="twitter-tweet-list">
					<h3>#ChugokuGTUG</h3>
					<c:forEach var="e" items="${chugokugtugHashTweets}">
						<div class="twitter-tweet">
							<div class="twitter-profile-image">
								<a href="http://twitter.com/${f:h(e.fromUser)}"> <img
									height="48" width="48" src="${f:url(e.profileImageUrl)}"
									alt="twitterProfileImage">
								</a>
							</div>
							<div class="twitter-bbspost-body">
								<div class="twitter-screen-name">
									<a href="http://twitter.com/${f:h(e.fromUser)}" target="_blank">
										${f:h(e.fromUser)} </a>
								</div>
								<div class="twitter-content">${f:h(e.text)}</div>
								<div class="twitter-entrydate">${e.createdAt}</div>
							</div>
						</div>
					</c:forEach>
				</div>
			</div>
		</div>
	</div>
	<script>
		$(function() {
			$(".twitter-content").each(function() {
				var content = $('<div>').text($(this).html()).html();
				$(this).html(twttr.txt.autoLink(content));
			});
		});

		$(function() {
			var viewTime = function(elapsedTime) {
				var time = parseInt(elapsedTime / 1000);
				if (time < 60) {
					return time + '秒前';
				}
				time = parseInt(time / 60);
				if (time < 60) {
					return time + '分前';
				}
				time = parseInt(time / 60);
				if (time < 24) {
					return time + '時間前';
				}
				time = parseInt(time / 24);
				return time + '日前';
			};

			var now = new Date;
			var nowTime = now.getTime();
			$(".twitter-entrydate").each(function() {
				var tweetTime = Date.parse($(this).html());
				var elapsedTime = nowTime - tweetTime;

				var time = viewTime(elapsedTime);
				$(this).html(time)
			});
		});
	</script>
</body>
</html>
